<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= webpackConfig.name %>
  </title>

  <!-- 引入样式 -->
  <!-- 在 index.html 文件中，使用 node 的模板语法对 CDN 数据进行解析和渲染 -->
  <!-- index.html 这个文件是 htmlWebpackPlugin 这个插件的模板文件，在其中能够获取到我们配置的数据-->
  <!-- 尖括号和百分比, 是一种模板语法(ejs/pug/artTemplate)
    模板只包裹js代码即可, 意思就是右边是个变量, 把值留在原地
    index.html中想要使用webpack里配置变量, 需要使用这种语法
    for...of循环遍历cdn.css的外链的css地址
  -->
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%=css%>">
    <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it
        to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->

  <!-- 引入JS -->
  <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%=js%>"></script>
    <% } %>
</body>

</html>